<template>
  <div class="navBar">
    <Hamburger
      :collapse="collapse"
      @toggleCollapse="handleCollapse"
    ></Hamburger>
    <Breadcrumb></Breadcrumb>
    <div class="flex justify-end flex-1 items-center mr-[20px]">
      <ScreenFull></ScreenFull>
      <SizeSelect></SizeSelect>
      <SwitchLang></SwitchLang>
      <SettingTheme @settingTheme="handleSettingTheme"></SettingTheme>
      <Avator></Avator>
    </div>
  </div>
</template>

<script setup lang="ts" name="NavBar">
const collapse = ref(false)
const handleCollapse = () => {
  collapse.value = !collapse.value
}
const emit = defineEmits(["settingTheme"])
const handleSettingTheme = () => {
  emit("settingTheme")
}
</script>

<style scoped lang="scss">
.navBar {
  @apply h-[50px]  flex items-center;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
}
</style>
